<template>
  <div>
    <el-container>
      <el-main class="el-mainBox">
        <div class="rightLayout">
          <el-header>
            <div class="report_header" ref="headerHeight">
              <div class="report_header_left"></div>
              <div style="display: flex;flex-direction: row;justify-content:space-between;width: 100%;">
                <div style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px;justify-content: flex-end;">

                  <div class="report_header_date">
                    <el-date-picker v-model="query.date" value-format="yyyy-MM-dd" type="daterange" align="right"
                                    unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                  </div>

                </div>
                <div>
                  <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="queryClick">查询</el-button>
                  <ExportList2Excel style='margin-top: 5px;' ref="exportList2Excel" @handleExport="handleExport" name="导出" />
                </div>
               </div>
              </div>
          </el-header>
          <div class="pd10">
            <el-table :data="productList" stripe border :height="curHeight" style="width: 100%">
              <el-table-column label="序号" type="index" width="80" align="center" />
              <el-table-column prop="createDate" label="举报时间" header-align="center" :show-overflow-tooltip="true"
                               width="160">
                <template slot-scope="scope">
                  <span>{{ scope.row.createDate | datetimeFormatter }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="anonymous" label="是否匿名" header-align="center" width="80">
                <template slot-scope="scope">
                  <span>{{ scope.row.anonymous | watchAnonymous}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="realName" label="举报人姓名" width="110" />
              <el-table-column prop="phone" label="举报人电话" width="110" />
              <el-table-column prop="content" label="举报内容" min-with="180"/>
              <el-table-column align="center" prop="meta" label="附件视频/图片" header-align="center" min-with="80">
                <template slot-scope="scope">
                  <div v-for="(item ,index) in scope.row.meta" style="display: inline-block;margin-right: 10px">
                    <a target="_blank" :href="item.url" v-if="item.type == 1">
                      <img v-if="item.type == 1" style="width: 100px;height: 100px" :src="item.url" />
                    </a>
                    <a target="_blank" :href="item.url"  v-if="item.type == 2">
                      <video v-if="item.type == 2" style="width: 100px;height: 100px" :src="item.url"/>
                    </a>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="height: 50px;padding-left: 10px;border-top: 1px solid #eeeeee">
            <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="loadStock" />
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
  import ExportList2Excel from "@/components/ExportList2Excel";
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import loadMore from '@/utils/loadMore.js'
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import splitpanel from '@/components/SplitPanel'
  import Pagination from '@/components/Pagination'
   import CategoryPanel from '@/components/CategoryPanel'
  import {
    list
  } from '@/api/accusation'
  import {
    list as brandList
  } from '@/api/brand'
  import {
    list as shopList
  } from '@/api/shop'
  import utils from "@/utils/utils";
  export default {
    // name: 'stock-list',
    directives: {
      permission,
      loadMore
    },
    components: {
      ExportList2Excel,
      splitpanel,
      Pagination,
    },
    filters: {
      watchAnonymous(val) {
        if (val == 0) {
          return '是'
        } else if (val == 1) {
          return '否'
        }
      }
    },
    data() {
      return {
        request: 'product',
        department: [],
        queryType: false,
        curHeight: null,
        mchType: '',
        mchIdOptions: [],
        defaultProps: {
          children: 'childrens',
          label: 'name'
        },
        query: {
          sysMchId: '',
          product: '',
          brandId: '',
          shopId: '',
          date:[]
        },
        pageNum: 1,
        pageSize: 20,
        printing:5000,
        total: 0,
        productCategoryId: '',
        productList: [],
        productOptions: [],
        brandIdOptions: [],
        shopIdOptions: []
      }
    },
    watch: {},
    activated() {
      this.payLoads = new Date().getTime()
    },
    created() {
      // this.loadTree()
      this.loadStock()
    },
    mounted() {
      this.beforeMount()
      this.comeIn()
    },
    methods: {
      handleExport() {
        let _this = this
        var loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        let data = {}
        data.tHeader = [  "举报时间",   "是否匿名",  "举报人姓名", "举报人电话",'举报内容']
        data.filterVal = ["createDate","anonymous","realName", "phone",'content']
        data.filename = "举报查询";
        const params = new URLSearchParams()
        params.append('pageNum', "1")
        params.append('pageSize', "5000")
        if(this.query.date != null ){
          params.append(
            "startDate",
            this.query.date.length > 0 ? this.query.date[0] : ""
          );
          params.append(
            "endDate",
            this.query.date.length > 0 ? this.query.date[1] : ""
          );
        }
        list(params).then(res => {
          res.data.data.forEach(item=>{
            item.createDate = this.$options.filters['datetimeFormatter'](item.createDate)
          })
          data.list = res.data.data
          _this.$refs.exportList2Excel.handleDownload(data);
          loading.close();

          if(data.list.length==this.printing){
            this.pageNum++
            console.log(this.pageNum);
            this.handleExport()
          }
          else{
            return;
          }
        }).catch(error => {
          _this.$refs.exportList2Excel.unlockLoading()
          loading.close();
          console.log('error!!')
        })
      },
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            if (_this.queryType == false) {
              var h = document.documentElement.clientHeight || document.body.clientHeight
              _this.curHeight = h - 224 // 减去页面上固定高度height
            } else {
              var h = document.documentElement.clientHeight || document.body.clientHeight
              _this.curHeight = h - 270 // 减去页面上固定高度height
            }
          })()
        }
      },
      comeIn() {
        console.log('222')
        var h = document.documentElement.clientHeight || document.body.clientHeight
        this.curHeight = h - 224 // 减去页面上固定高度height
      },
      chooseClick() {
        this.queryType = !this.queryType
        if (this.queryType == false) {
          var h = document.documentElement.clientHeight || document.body.clientHeight
          this.curHeight = h - 224 // 减去页面上固定高度height
        } else {
          var h = document.documentElement.clientHeight || document.body.clientHeight
          this.curHeight = h - 270 // 减去页面上固定高度height
        }
      },
      handleNodeClick(data) {
        this.productCategoryId = data.id
        this.loadStock()
      },
      loadTree() {
        const _this = this
        category().then(response => {
          console.log(response)
          if (response.type == 'success') {
            let allCategory = [{
              id: '',
              name: '全部',
              childrens: response.data
            }]
            _this.department = allCategory
          } else {
            _this.$message({
              message: response.content,
              offset: 120,
              center: true
            })
          }
        }).catch(error => {})
      },

      loadStock() {
        const params = new URLSearchParams()
        params.append('pageSize', this.pageSize)
        params.append('pageNum', this.pageNum)
        if(this.query.date != null ){
          params.append(
            "startDate",
            this.query.date.length > 0 ? this.query.date[0] : ""
          );
          params.append(
            "endDate",
            this.query.date.length > 0 ? this.query.date[1] : ""
          );
        }


        list(params).then(res => {
          res.data.data.forEach(item=>{
            item.meta = JSON.parse(item.meta)
          })
          this.productList = res.data.data
          this.total = res.data.total
        }).catch(err => {
          console.log(err)
        })
      },
      queryProduct(query) { // 查询商品
        this.productOptions = []
        list({
          productName: query
        }).then(res => {
          this.$set(this.$data, 'productOptions', res.data.data)
        }).catch(err => {
          console.log(err)
        })
      },
      getProductList() { // 加载商品
        list().then(res => {
          this.$set(this.$data, 'productOptions', res.data.data)
        }).catch(err => {
          console.log(err)
        })
      },
      queryBrand(query) { // 查询品牌
        this.brandIdOptions = []
        brandList({
          name: query
        }).then(res => {
          this.$set(this.$data, 'brandIdOptions', res.data.data)
        }).catch(err => {
          console.log(err)
        })
      },
      getBrandList() { // 加载品牌
        brandList().then(res => {
          this.$set(this.$data, 'brandIdOptions', res.data.data)
        }).catch(err => {
          console.log(err)
        })
      },
      getShop() { // 获取仓库
        shopList().then(res => {
          this.$set(this.$data, 'shopIdOptions', res.data.data)
        }).catch(err => {
          console.log(err)
        })
      },
      queryClick() {
        this.loadStock()
      },
      resetClick() {
        this.query.product = ''
        this.query.brandId = ''
        this.query.shopId = ''
        this.loadStock()
      },
    nodeClick(data) {
        this.productCategoryId = data.id
        this.loadStock()
      },
    }
  }
</script>

<style scoped lang="scss">
  .table-container {
    padding: 10px;
    box-sizing: border-box;
  }

  .el-mainBox {
    padding: 0 !important;
  }

  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  /deep/.el-header {
    padding: 10px;
    padding-bottom: 0;
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
  }

  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
  }

  .report_header_date {
    margin-left: 10px;
    margin-top: 5px;
  }
</style>
